<template>
  <div>
    <search position="absolute"></search>
    <fishs class="mt-p-fishes"
    @changeFish="selectFish"
    :fish="fish"
    :whole='0'></fishs>
  </div>
</template>

<script>
import Fishs from "@/components/Selector/Fishes"
import { Search } from "vux"

export default {
  data() {
    return {
      fish: {},
    }
  },
  mounted() {
    this.$store.dispatch('getSupplements')
  },
  methods: {
    selectFish(fish) {
      
      this.$store.commit("changeKind", fish)
      if(this.fromRouteName === "suppliesEditBoard") {
        history.go(-1)
      }else {
        this.$router.push({ path: "/trade/supplies/post/info" })
      }
    }
  },
  computed: {
    fromRouteName() {
      return this.$store.state.page.from.name
    }
  },
  watch: {
    // $route(to, from) {
    //   console.log('supplies fish')
    //   this.fromRouteName = from.name
    // },
  },
  components: { Fishs, Search }
}
</script>

<style lang="scss">
@import "../../../../styles/index.scss";

.weui-search-bar__label {
  line-height: 2;
}

.mt-p-fish-search {
  width: 100%;
  height: 44px;
}

.mt-p-fishes {
  position: fixed;
  display: flex;
  flex-direction: row;
  top: 44px;
  right: 0;
  bottom: 0px;
  left: 0;

  .mt-s-kinds {
    background: #f0f0f0;
    overflow-y: scroll;

    li {
      position: relative;
      padding-left: 4vw;
      line-height: 10vw;
      height: 10vw;
      border-bottom: 1px solid #fff;

      &.active {
        &::before {
          position: absolute;
          content: "";
          top: 0;
          bottom: 0;
          left: 0;
          width: 1vw;
          background: orange;
        }
      }
    }
  }

  & > .mt-s-species {
    background: #fff !important;
    padding-top: 3vw;
    padding-left: 3.7vw;
    overflow-y: scroll;

    & > li {
      float: left;
      display: table;
      width: 18vw;
      height: 13vw;
      margin-right: 3.7vw;
      margin-bottom: 3vw;
      font-size: 3vw;
      // line-height: 12vw;
      border: 1px solid $border-color;
      border-radius: 4px;
      text-align: center;

      & > span {
        display: table-cell;
        vertical-align: middle;
        // line-height: 3vw;
      }
    }
  }
}
</style>
 